<!-- name 属性用于给组件指定一个名称 -->
<script setup lang="ts" name="Person">
// ref 设置基本数据类型和对象类型数据的响应式 reactive 只能定义对象类型数据的响应式
import { ref } from 'vue';
let name = "张三"
let age = 18
let show = ref(false)
let tel = ref(18844446666)

function showTel() {
  if(show.value){
    show.value = false
  }
  else
  {
    show.value = true
  }
    
}
</script>

<template>
  <div class="person">
    <h1>
        姓名：{{ name }}
        <br>
        年龄：{{ age }}
        <br>
        电话： <div v-if="show">{{ tel }}</div>
        <button @click="showTel()">点我获取联系方式</button>
  </h1>
  </div>
</template>

<style>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 20px;
  padding: 20px;
}
</style>
